<template>
	<view class="container">
		<!-- 搜索表单 -->
		<view class="query-content">
			<uni-forms ref="queryFormRef" :model="queryForm" class="form-view">
				<view class="form-row">
					<uni-forms-item label="" name="parentId" class="form-item">
						<uni-easyinput v-model="queryForm.parentId" placeholder="请输入父级Id" trim="true"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item label="" name="leader" class="form-item">
						<uni-easyinput v-model="queryForm.leader" placeholder="请输入班主任名称" trim="true"></uni-easyinput>
					</uni-forms-item>
				</view>
			</uni-forms>
			<button type="primary" class="button-round" @click="submitForm">查 询</button>
		</view>
		<!-- 表头 -->
		<view class="table-header">
			<text class="header-cell">班级名称</text>
			<text class="header-cell">班级ID</text>
			<text class="header-cell">班主任</text>
			<text class="header-cell">联系电话</text>
			<text class="header-cell">电子邮件</text>
			<text class="header-cell">状态</text>
		</view>
		<!-- 班级列表 -->
		<view class="class-list">
			<view v-for="item in classList" :key="item.classesId" class="class-item">
				<text class="contact-cell">{{ item.classesName }}</text>
				<text class="contact-cell">{{ item.classesId }}</text>
				<text class="contact-cell">{{ item.leader }}</text>
				<text class="contact-cell">{{ item.phone }}</text>
				<text class="contact-cell">{{ item.email }}</text>
				<text class="contact-cell">{{ item.status === '0' ? '激活' : '非激活' }}</text>
			</view>
		</view>

		<!-- 分页控制 -->
		<!-- 分页控制 -->
		<view class="pagination">
			<button @click="previousPage" :disabled="currentPage <= 1">上一页</button>
			<text>第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</text>
			<button @click="nextPage" :disabled="currentPage >= totalPages">下一页</button>
		</view>


	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue';
	import classApi from '@/api/class.js'
	const queryForm = ref({
		parentId: '', // 父级id，非必须
		leader: '', // 班主任，非必须
	});
	const queryFormRef = ref(null);
	const classList = ref([]);

	const currentPage = ref(1);
	const pageSize = 10;

	const paginatedContacts = computed(() => {
		const start = (currentPage.value - 1) * pageSize;
		const end = start + pageSize;
		return classList.value.slice(start, end);
	});

	const totalPages = computed(() => Math.ceil(classList.value.length / pageSize));

	const previousPage = () => {
		if (currentPage.value > 1) {
			currentPage.value--;
		}
	};

	const nextPage = () => {
		if (currentPage.value < totalPages.value) {
			currentPage.value++;
		}
	};

	const submitForm = () => {
		queryFormRef.value.validate().then(res => {
			if (res) {
				console.log('表单验证通过', queryForm.value);
				classApi.getClassList(queryForm.value.parentId, queryForm.value.leader).then(apiRes => {
					if (apiRes.code === 200) {
						console.log('获取班级列表成功', apiRes);
						classList.value = apiRes.data;
					}
				})
			}
		}).catch(err => {
			console.error('表单验证失败', err);
		});
	};
</script>

<style lang="scss">
	.container {
		padding: 30px;
	}

	.form-view {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	.form-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
	}

	.form-item {
		flex: 1;
		margin-right: 10px;

		&:last-child {
			margin-right: 0;
		}
	}

	.button-round {
		border-radius: 999px; 
		padding: 10px 20px; 
		margin-top: 10px; 
	}

	// Table styles
	.table-header,
	.class-item {
		display: flex;
		width: 100%;
	}

	.table-header {
		background-color: #f0f0f0;
		padding: 10px;
		font-weight: bold;
		border-bottom: 2px solid #ccc; 
	}

	.header-cell,
	.contact-cell {
		flex: 1;
		text-align: center;
		padding: 10px;
		border-bottom: 1px solid #eee; 
	}

	// Pagination styles
	.pagination {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 20px;
	}

	.page-button {
		background-color: #007aff; 
		padding: 10px 20px; 
		border: none;
		border-radius: 4px; 
		transition: background-color 0.3s ease; 

		&:hover:not(:disabled) {
			background-color: darken(#007aff, 10%); 
		}

		&:disabled {
			background-color: #ccc; 
			cursor: not-allowed; 
		}
	}

	.page-info {
		margin: 0 20px; 
		font-size: 16px; 
	}

	
	.class-item:last-child .contact-cell {
		border-bottom: none;
	}
	button {
		margin: 0 10px;
	}
</style>